<template>
    <view class="lrl-drag-panel" 
        :class="{'lrl-drag-panel-transition': !isMove}"
        id="lrl-drag-panel"
        :style="{ 
            transform: `translate(${ buttonLeft }px, ${ buttonTop }px)`,
            left: `0`,
			top: `0`,
            zIndex: zIndex,
            opacity: show ? '1' : '0'
        }" 
        @touchstart="touchStart"
        @touchmove.stop.prevent="touchMove" 
        @touchend="touchEnd"
    >
        <slot></slot>
    </view>
</template>

<script>
	const sys = uni.getSystemInfoSync()
    /**
     *  DragPanel 简单拖拽吸附面板，自定义插槽内容拖拽吸附
     * @description [app|h5|mp-weixin] 简单拖拽吸附面板，自定义插槽内容拖拽吸附
     * @author liruilin
     * @property {String}             initPosition = [left|right]              初始化时左右吸附位置
     *  @value left 左侧
     *  @value right  右侧
     * @property {Number}             zIndex      
     * @property {Number}             initTop                                  初始化时的top值，单位px
     * @property {Object}             safeArea = {top, right, left, bottom}    上下左右安全区域边界值，单位px
     * @property {Boolean}            adsorption                               是否自动吸附左右，默认true
     * @property {Number}             adsorptionRatio                          判断吸附左右水平基准比例参数，越大左侧吸附判断区域越大，越小右侧判断区域越大，默认1
     * @example <lrl-drag-panel>content</lrl-drag-panel>
     */
    export default {
        name: 'lrl-drag-panel',
        props: {
            initTop: {
                type: Number,
                default: 500
            },
            zIndex: {
                type: Number,
                default: 999
            },
            initPosition: {
                type: String,
                default: 'left'
            },
			safeArea: {
				type: Object,
				default: () => ({
					top: 0,
					left: 0,
					right: 0,
					bottom: 0
				})
			},
			adsorption: {
				type: Boolean,
				default: true
			},
			adsorptionRatio: {
				type: Number,
				default: 1
			}
        },
        data() {
            return {
                buttonLeft: 0,
                buttonTop: 0,
                buttonRight: '',
                startX: 0,
                startY: 0,
                windowWidth: 0,
                boxWidth: 0,
                boxHeight: 0,
                isMove: false,
                show: false
            };
        },
        created() {
            this.buttonTop = this.initTop
        },
        mounted() {
            uni.getSystemInfo({
                success: (res) => {
                    this.windowWidth = res.windowWidth;
                    this.queryDom(true)
                }
            })
        },
		computed: {
			safeAreaMrgen(){
				return Object.assign({
					top: 0,
					left: 0,
					right: 0,
					bottom: 0
				}, this.safeArea)
			}
		},
        methods: {
            queryDom(isInit){
                uni.createSelectorQuery()
                    .in(this)
                    .select('#lrl-drag-panel')
                    .boundingClientRect(data => {
                      if (data) {
                        this.boxWidth = data.width;
                        this.boxHeight = data.height;
                        if(isInit){
                            this.buttonLeft = this.initPosition === 'left' ? this.safeAreaMrgen.left : this.windowWidth - data.width - this.safeAreaMrgen.right
                            this.$nextTick(() => {
                                setTimeout(() => {
                                     this.show = true
                                }, 300)
                            })
                        }
                      }
                    })
                    .exec();
            },
            touchStart(event) {
                this.queryDom()
                this.isMove = true
                this.startX = event.touches[0].clientX - event.currentTarget.offsetLeft - this.buttonLeft;
                this.startY = event.touches[0].clientY - event.currentTarget.offsetTop - this.buttonTop;
            },
            touchMove(event) {
                const moveX = event.touches[0].clientX - this.startX;
                const moveY = event.touches[0].clientY - this.startY;
                let realityX = 0
                if (moveX < 0) {
                    realityX = 0
                } else if (moveX > this.windowWidth - event.currentTarget.offsetWidth) {
                    realityX = this.windowWidth - event.currentTarget.offsetWidth 
                } else {
                    realityX = moveX 
                }
                this.buttonLeft = Math.min(realityX, this.windowWidth - this.boxWidth) 
                this.buttonTop = Math.min(Math.max(moveY, sys.statusBarHeight + this.safeAreaMrgen.top), sys.windowHeight - this.boxHeight - this.safeAreaMrgen.bottom ) 
            },
            touchEnd(event) {
                this.isMove = false
				
				if(this.adsorption) {
					// const buttonWidth = event.currentTarget.offsetWidth;
					const buttonWidth = this.boxWidth;
					const currentPosition = parseInt(this.buttonLeft) + buttonWidth / 2;
					this.$nextTick(() => {
					    if (currentPosition < this.windowWidth / 2 * this.adsorptionRatio) {
					        this.buttonLeft = this.safeAreaMrgen.left;
					    } else {
					        this.buttonLeft = this.windowWidth - buttonWidth - this.safeAreaMrgen.right;
					    }
					})
				}
            }
        }
    };
</script>

<style>
    .lrl-drag-panel {
        position: fixed;
/*        width: 80rpx;
        height: 80rpx;
        background-color: #007aff;
        border-radius: 50%; */
    }
    .lrl-drag-panel-transition{
        transition: transform 0.3s ease-in-out,
					opacity 0.2s ease-in-out;
    }
</style>